<template>
  <el-dialog
      class="scrollbar"
      v-model="dialogVisible"
      title="关联文章"
      :align-center="true"
      :destroy-on-close="true"
      width="900px"
      draggable
  >
    <div class="table-box">
      <ProTable
          ref="articleTable"
          title="文章列表"
          :columns="columns"
          :pagination="true"
          :request-api="getTableList"
          :data-callback="dataCallback"
          :select-list="dialogProps.assocList"
          row-key="article_id"
      >
        <!-- 表格 header 按钮 -->
        <template #tableHeader>
          <el-button type="primary" :icon="CirclePlus" plain @click="handleAssoc">确定</el-button>
        </template>
        <!-- Expand -->
        <template #expand="scope">
          {{ scope.row }}
        </template>
        <!-- pics -->
        <template #pics="scope">
          <el-image :src="scope.row.pics" style="height: 65px;" :preview-src-list="getPicList(scope.row.pics)" preview-teleported fit="cover" />
        </template>
        <!-- status -->
        <template #status="scope">
          <template v-if="scope.row.status === 1">
            <el-tag type="primary">已发布</el-tag>
          </template>
          <template v-else>
            <el-tag type="info">未发布</el-tag>
          </template>
        </template>
      </ProTable>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import ProTable from "@/components/ProTable/index.vue";
import {article} from "@/views/app/special/special.tsx";
import {inject, ref} from "vue";
import {articlePageListApi} from "@/api/modules/article.ts";
import {CirclePlus} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";

const cateTree = inject("cateTree", []);
const { columns } = article(cateTree);

// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
// 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getUserList"
const getTableList = (params: any) => {
  let newParams = JSON.parse(JSON.stringify(params));
  return articlePageListApi(newParams);
};

const getPicList = (pics: string) => {
  return pics.split(";");
}

// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total && pageNum && pageSize 这些字段，那么你可以在这里进行处理成这些字段
// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
const dataCallback = (data: any) => {
  const rows = data.rows as any[];
  rows.forEach(item => item.article_id = item.id);
  return {
    rows: rows,
    total: data.total,
    page_num: data.page_num,
    page_size: data.page_size
  };
};

// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const articleTable = ref();
const emits = defineEmits(["assoc"]);
const handleAssoc = () => {
  const assocInfos = articleTable.value.selectedList;
  if (assocInfos.length === 0) {
    ElMessage.warning({ message: `请选择需要关联的文章！` });
    return;
  }
  const assocInfoList = assocInfos.map((assocInfo: any) => {
    return { article_id: assocInfo.article_id, sort: assocInfo.sort };
  });
  emits("assoc", assocInfoList);
  dialogVisible.value = false;
}

interface DialogProps {
  rowData: any;
  assocList: any[];
  getTableList?: () => Promise<any>;
}
const dialogVisible = ref(false);
const dialogProps = ref<DialogProps>({
  rowData: {},
  assocList: [],
});

// 接收父组件传过来的参数
const acceptParams = (params: DialogProps): void => {
  dialogProps.value = params;
  dialogVisible.value = true;
}

defineExpose({ acceptParams });
</script>

<style scoped lang="scss">

</style>
